import { useIntl } from '@umijs/max';
import { Tabs } from 'antd';
import React from 'react';
import Authority from './management/authority';
import Character from './management/character';
import User from './management/user';

const Admin: React.FC = () => {
  const [activeKey, setActiveKey] = React.useState('用户管理');
  const [searchName, setSearchName] = React.useState('');
  const intl = useIntl();

  const handleTabChange = (key: string) => {
    setSearchName('');
    setActiveKey(key);
  };
  const transTab = (key: string, searchValue: any) => {
    setActiveKey(key);
    setSearchName(searchValue);
  };

  const items = [
    {
      label: intl.formatMessage({
        id: 'pages.admin.userManagement',
        defaultMessage: '用户管理',
      }),
      key: '用户管理',
      children: <User searchName={searchName} transTab={transTab}></User>,
    },
    {
      label: intl.formatMessage({
        id: 'pages.admin.roleManagement',
        defaultMessage: '角色管理',
      }),
      key: '角色管理',
      children: <Character searchName={searchName} transTab={transTab}></Character>,
    },
    {
      label: intl.formatMessage({
        id: 'pages.admin.rightsManagement',
        defaultMessage: '权限管理',
      }),
      key: '权限管理',
      children: <Authority transTab={transTab}></Authority>,
    },
  ];

  return (
    <Tabs
      destroyInactiveTabPane={true}
      activeKey={activeKey}
      onChange={handleTabChange}
      type="card"
      items={items}
    />
  );
};

export default Admin;
